<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="button-sp-area">
                <span>目前所有置于打开状态的阀门：</span>
                <button class="mini-btn" type="primary" size="mini" @click="searchByActiveValveData">搜索</button>
            </view>
        </view>


        <!-- 数据显示区 -->
        <uni-list>
            <view v-for="item in parentData" :key="item.id">

                <uni-list :border="true">

                    <!-- 自定义右侧内容 -->
                    <uni-list-chat :title="item.valvePositionArea"
                        avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
                        :note="item.valvePositionNumber" :time="item.updateTime.toString().substring(0, 10)"
                        badge-positon="left" :badge-text="item.status === 1 ? '开' : '关'">
                        <view class="chat-custom-right">
                            <text class="chat-custom-text">{{ item.updateTime.toString().substring(0, 10) }}</text>
                            <!-- 需要使用 uni-icons 请自行引入 -->
                            <!-- <uni-icons type="star-filled" color="#999" size="18"></uni-icons> -->
                            {{ item.updateTime.toString().substring(11) }}
                        </view>
                    </uni-list-chat>
                </uni-list>
            </view>

        </uni-list>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useValvesStore } from "@/stores/modules/getValvesData";
import type Valves from "@/types/valves";
import type TbValve from '@/types/tbValve';
import { http } from "@/utils/http";
import type ValvesOperationRecord from '@/types/valvesOperationRecord';

// 使用 ref 创建响应式数据
const candidates = ref<string[]>([]);
const city = ref('');
const parentData = ref<TbValve[]>([]);

const valvesStore = useValvesStore();
candidates.value = valvesStore.valvesList;

// 定义事件处理函数
const searchByActiveValveData = async () => {
    // console.log('点击了搜索按钮');

    // console.log(candidates.value);

    //发送请求
    const res = await http<any>({
        url: '/valve/getOpenStatusValveData',
        method: 'GET'
    });
    console.log('搜索结果：', res);

    console.log(res.data);
    if (Array.isArray(res.data) && res.data.length === 0) {
        uni.showToast({
            title: '没有开启的阀门',
            icon: 'error',
            duration: 2000
        });
        return;
    }
    parentData.value = res.data;
};
</script>

<style lang="scss">
.text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.uni-px-5 {
    padding-left: 10px;
    padding-right: 10px;
}

.uni-pb-5 {
    padding-bottom: 10px;
}

.button-sp-area {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-evenly;
    margin: 20rpx 25rpx;
}

.chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.chat-custom-text {
    font-size: 12px;
    color: #999;
}
</style>